<template>
  <el-dialog
    @close="cancel"
    :title="title"
    :visible.sync="open"
    width="600px"
    class="dialogClass"
    append-to-body
  >
    <template slot="title">
      <div class="modalTitle">
        <img
          src="../../../../assets/bluelogo/drawerTitle.png"
          alt=""
          class="titleLogo"
        />{{ title }}
      </div>
    </template>

    <div>
      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="120px"
      >
        <el-form-item label="退回原因:" prop="rejectReason">
          <el-input
            v-model="formData.rejectReason"
            placeholder="请输入退回原因"
            :maxlength="300"
            show-word-limit
            :autosize="{ minRows: 7 }"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <div class="dialog-footer">
        <el-button @click="cancel" class="resetButton">取消</el-button>
        <el-button class="searchButton" @click="submitForm">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { MODALTYPE } from "../../../../utils/variable";
import { returnTask } from "@/api/checkTask/task";
export default {
  inheritAttrs: false,
  props: ["modalType", "id"],
  data() {
    return {
      isDisabled: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      formData: { rejectReason: "" },
      rules: {
        rejectReason: [
          {
            required: true,
            message: "请写退回原因",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    modalType: {
      handler(value) {
        if (value == MODALTYPE["退回"]) {
          this.open = true;
          this.title = "退回原因";
        }
      },
      immediate: true,
    },
  },

  methods: {
    // 取消按钮
    cancel() {
      this.$emit("update:modalType", "");
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.formData = {};
      this.resetForm("form");
    },
    // 提交按钮
    submitForm() {
      let param = {
        id: this.id,
        returnReason: this.formData.rejectReason,
        userId: this.$store.state.user.userId,
      };
      returnTask(param).then((response) => {
        this.$modal.msgSuccess("退回成功");
        this.open = false;
        this.reset();
        this.$emit("fatherMethod");
     
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../../assets/styles/dialog.scss"; //模态框样式
::v-deep.el-select {
  width: 100%;
}
::v-deep .label {
  width: 100px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 700;
  color: #5e5f61;
  display: inline-block;
  text-align: right;
}
::v-deep .content {
  color: #5e5c5c;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
::v-deep .el-descriptions-item__container {
  margin-bottom: 15px;
}
</style>
